<template>
  <div id="progressDetail">
    <el-row type="flex" class="" justify="center">
      <el-col :span="23" class="line">
        <i class="el-icon-time"></i>进度查询
        <i class="el-icon-arrow-right"></i>详情
      </el-col>
    </el-row>
    <div class="content" v-loading.fullscreen.lock="fullscreenLoading"
              element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)">
      <ul class="layui-timeline">
        <template v-for="item in Detaildata" >
          <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
              <h3 class="layui-timeline-title">{{item.create_time}}</h3>
                <p>
                  {{item.result}}<br>
                  {{item.msg}}
                </p>
              </div>
          </li>
        </template>
                 <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                 </li>
                            <!-- <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                      <h3 class="layui-timeline-title">8月16日</h3>
                                      <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
                                      <ul>
                                        <li>《登高》</li>
                                        <li>《茅屋为秋风所破歌》</li>
                                      </ul>
                                    </div>
                                  </li>
                                  <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                      <h3 class="layui-timeline-title">8月15日</h3>
                                      <p>
                                        中国人民抗日战争胜利72周年
                                        <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
                                        <br>铭记、感恩
                                        <br>所有为中华民族浴血奋战的英雄将士
                                        <br>永垂不朽 <el-button type="primary" size="mini">查看详情</el-button>
                                      </p>
                                    </div>
                                  </li>
                                  <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                      <h3 class="layui-timeline-title">8月15日</h3>
                                      <p>初审通过
                                        <br><el-button type="primary" size="mini">打印申请表</el-button>
                                      </p>
                                    </div>
                                  </li>
                                  <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                      <h3 class="layui-timeline-title">8月15日</h3>
                                      
                                    </div>
                                  </li> -->
      </ul>
    </div>
  </div>
</template>

<script>
  
  export default {

    data() {
      return {
        proId:'',
        fullscreenLoading:false,
        Detaildata:[],
      }
    },
    mounted(){
      this.fullscreenLoading=true;
      this.getInfo();
    },
    methods: {
      getInfo(){
        var that=this;
        var pro=location.href.split('?')[1];
        var proId=pro.split("=")[1];
        this.proId=proId;
        this.axios({
          url:this.host+'/3v1t.smserver.cn/index.php/index/student.progress/detail_entry',
          method:'post',
          data:JSON.stringify({id:proId}),
          headers:{
                "Content-type":"application/json"
          }
        }).then((res)=>{
          console.log(res);
          that.fullscreenLoading=false;
           var data=res.data.data;
          // data.forEach((item)=>{
          //   if(item.type=="01"){
          //     item.type="三位一体"
          //   }else{
          //     item.type="高水平运动员"
          //   }
          //   item.status=item.status.name;
          // })
           that.Detaildata=data;
        })
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
  #progressDetail {
    //width:100%;
    //line-height:100%;
    padding: 10px;
    .line {
      border-bottom: 1px solid #ccc;
      text-align: left;
      height: 50px;
      line-height: 50px;
      padding-left: 10px;
    }
    .content {
      padding: 20px;
      text-align: left;
    }
    .layui-timeline-axis{
      color:#409eff;
    }
    .el-button--mini, .el-button--mini.is-round {
      padding: 4px 8px;
    }
    
  }

</style>
